<template>
    <el-container v-if="show" style="max-width: 100vw;max-height: 100vh;">
        <el-header>
            <div style="width: 100%;height: 100%;background-color: #409eff;position: relative;">
                <flexBox style="height: 100%;padding-left: 30px;" alignItems="center" justifyContent="flex-start">
                    <span style="font-size: 18px;color: white;">AI Examiner</span>
                </flexBox>



                <el-dropdown style="position: absolute;top: 0;right: 30px;height: 100%;border: 0;outline: 0;"
                    placement="bottom-end">
                    <flexBox class="userButton" style="height: 100%;padding-right: 0px;padding: 0 8px;"
                        alignItems="flex-end" justifyContent="center" flex-direction="column" gap="2px">
                        <span style="font-size: 14px;color: white;">{{ store.userData.username }}</span>
                        <span style="font-size: 10px;color: white;opacity: 0.8;">{{ store.userData.role }}</span>
                    </flexBox>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="() => {
                                tool.localStorage.removeItem('userData')
                                store.setUserData(undefined)
                                tool.location.reload()
                            }">
                                <flexBox alignItems="center" justifyContent="center" gap="4px">
                                    <cIcon name="logout"></cIcon>
                                    <span>退出登录</span>
                                </flexBox>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <el-aside style="position: relative;width: 130px;" :style="{
                minWidth: leftSize.width
            }">
                <div @mousedown="leftSize.handleStart()" class="resizeBar-width"
                    style="position: absolute;top: 0;right:0px">

                </div>
                <div style="width: 100%;height: 100%;">
                    <flexBox
                        style="width: 100%;height: calc(100% - 0px);border: 1px solid #409eff;border-left: 0;border-bottom: 0;border-top: 0;"
                        flex-direction="column" justify-content="flex-start" align-items="center">
                        <div style="background-color: white;width: 100%;">
                            <div
                                style="width: 100%;height: 25px;background-color: #409eff20;line-height: 25px;padding-left: 10px;font-size: 15px;font-weight: bold;color: #409eff;">
                                系统菜单
                            </div>
                        </div>
                        <flexBox flex-direction="column" v-for="(item, index) in leftMenu.data" style="width: 100%;"
                            :style="{
                                height: leftMenu.selectedIndex == index ? '100%' : 'unset'
                            }">
                            <el-button :title="item.description" @click="leftMenu.handleSelect(index)"
                                :text="leftMenu.selectedIndex != index ? true : false"
                                style="width: 100%;margin-left: 0;border-radius: 0;" type="primary">
                                <flexBox style="width: 100%;height: 32px;" align-items="center" :style="{
                                    width: `calc(${leftSize.width} - 16px)`
                                }" justify-content="flex-start">
                                    <cIcon style="margin-right:4px" :name="item.title"></cIcon>
                                    {{ item.title }}
                                </flexBox>
                            </el-button>
                            <div v-if="leftMenu.selectedIndex == index" style="width: 100%;height: 100%;background-color: white;overflow-y: auto;
    background-color: rgb(242,242,242);">
                                <flexBox style="width: 100%;max-height: 32px;" flex-direction="column">
                                    <el-button :title="subItem.description" @click="leftMenu.handleOpen(index, index2)"
                                        style="width: 100%;margin-left: 0;border-radius: 0;"
                                        v-for="(subItem, index2) in item.children" :style="{
                                            color: leftMenu.isThisOpen(index, index2) ? 'white' : '#333'
                                        }" :text="!leftMenu.isThisOpen(index, index2)" type="success">
                                        <flexBox style="width: 203px;height: 32px;max-height: 32px;"
                                            align-items="center" justify-content="flex-start" :style="{
                                                width: `calc(${leftSize.width} - 16px - 20px)`
                                            }">
                                            <cIcon style="margin-right:4px" :name="subItem.title"></cIcon>
                                            {{ subItem.title }}
                                        </flexBox>
                                    </el-button>
                                </flexBox>
                            </div>
                        </flexBox>
                    </flexBox>
                </div>
            </el-aside>
            <el-main style="overflow: hidden;width: 100%;">
                <flexBox style="width: 100%;height: calc(100%);" flex-direction="column">
                    <flexBox justify-content="flex-start"
                        style="width: 100%;height: 35px;border-bottom: 1px solid rgb(230,230,230);">
                        <el-button class="tabButton" :style="{
                            color: leftMenu.currentOpened === index ? 'white' : '#333'
                        }" type="success"
                            style="height: 100%;margin: 0;border-radius: 0;padding: 0 8px;padding-right: 7px;cursor: default;border: 1px solid transparent;position: relative;"
                            v-for="(item, index) in leftMenu.opened" :text="leftMenu.currentOpened !== index" bg>
                            <span>{{ leftMenu.getOpenedLabelDisplay(index) }}</span>
                            <cIcon :class="leftMenu.currentOpened === index ? '' : 'tabButtonClose'"
                                @click="leftMenu.handleClose(index)"
                                style="margin-left: 3px;cursor: pointer;position: relative;z-index: 10;" name="close">
                            </cIcon>
                            <div @click="leftMenu.handleChange(index)"
                                style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;">

                            </div>
                        </el-button>
                    </flexBox>
                    <flexBox v-if="leftMenu.opened.length" style="width: 100%;height: 100%;">

                        <div v-for="(item, index) in leftMenu.openedPages"
                            v-show="leftMenu.opened[leftMenu.currentOpened].index == index"
                            style="width: 100%;position: relative;height: 100%;">

                            <content v-if="!item.closed" :url="item.url" style="width: 100%;height: 100%;">
                            </content>
                        </div>

                    </flexBox>
                    <div v-if="!leftMenu.opened.length" style="width: 100%;height: 100%;">

                    </div>
                </flexBox>
            </el-main>
        </el-container>
        <el-footer>
            <div style="width: 100%;height: 100%;position: relative;">
                <flexBox style="position: absolute;top: 0;right: 30px;height: 100%;" alignItems="center"
                    justityContent="center">{{ clock.data }}</flexBox>
            </div>
        </el-footer>
    </el-container>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue';
import { useStore } from '../modules/store'
const store = useStore()
import router from '../modules/router'
import tool from '../modules/tool'
import flexBox from '../components/flexBox.vue'
import cIcon from '../components/cIcon.vue'
import content from './content.vue'

tool.resize.init()
const leftSize = reactive({
    width: tool.resize.get.leftMenuWidth(),
    resizing: false,
    currentX: store.mousePosition.x,
    handleStart() {
        this.resizing = true
        this.currentX = store.mousePosition.x
    },
    init() {
        tool.event.onChange('globalMouseUp', () => {
            this.resizing = false
        })
        watch(() => store.mousePosition, () => {
            if (this.resizing) {
                let t = store.mousePosition.x - this.currentX
                this.currentX += t

                let currentWidth = parseInt(this.width.split('px')[0])
                if (currentWidth + t < 130) return
                this.width = `${currentWidth + t}px`
                tool.resize.set.leftMenuWidth(this.width)
            }
        }, {
            deep: true
        })
    }
})

const show = ref(false)

const leftMenu = reactive({
    show: true,
    async get() {
        this.data = tool.config.systemMenu
    },
    data: [],
    selectedIndex: -1,
    handleSelect(index) {
        if (index == this.selectedIndex) {
            this.selectedIndex = -1
            return
        }
        this.selectedIndex = index
    },
    getSecondList() {
        if (this.selectedIndex == -1) return []
        if (this.data.length == 0) return []
        return this.data[this.selectedIndex].children
    },
    opened: [],
    getOpenedLabelDisplay(openedIndex) {
        return this.data[this.opened[openedIndex].first].children[this.opened[openedIndex].second].title
    },
    openedPages: [],
    currentOpened: -1,
    handleOpen(index, index2) {
        // for (let i = 0; i < this.opened.length; i++) {
        //     if (this.opened[i].first == index && this.opened[i].second == index2) {
        //         this.currentOpened = i
        //         return
        //     }
        // }
        this.opened.push({
            first: index,
            second: index2,
            index: this.openedPages.length
        })
        this.currentOpened = this.opened.length - 1
        this.openedPages.push({
            closed: false,
            url: this.data[index].children[index2].url
        })
    },
    isThisOpen(index, index2) {
        if (this.opened[this.currentOpened] === undefined) return false
        if (this.opened[this.currentOpened].first == index && this.opened[this.currentOpened].second == index2) return true
        return false
    },
    handleClose(openedIndex) {
        this.openedPages[this.opened[openedIndex].index].closed = true
        this.opened = [...this.opened.slice(0, openedIndex), ...this.opened.slice(openedIndex + 1)]
        while (this.opened.length && this.opened[this.currentOpened] === undefined) this.currentOpened--
    },
    handleChange(openedIndex) {
        this.currentOpened = openedIndex
    },
    getItemInfo(openedIndex) {
        return {
            parentNode: this.data[this.opened[openedIndex].first],
            currentNode: this.data[this.opened[openedIndex].first].children[this.opened[openedIndex].second]
        }
    },
    handleCloseByPageUrl(url) {
        for (let i = 0; i < this.opened.length; i++) {
            if (this.openedPages[this.opened[i].index].url == url) {
                this.handleClose(i)
                return
            }
        }
    },
    searchIndexes(name1, name2) {
        for (let i = 0; i < this.data.length; i++) {
            if (this.data[i].title === name1) {
                if(!name2)return [i]
                for(let i1=0;i1<this.data[i].children.length;i1++){
                    if(this.data[i].children[i1].title===name2){
                        return [i, i1]
                    }
                }
                return
            }
        }
        return
    }
})
tool.event.onChange('openPage', (e)=>{
    let indexes = leftMenu.searchIndexes(e.title1, e.title2)
    if(!indexes){
        
        return
    }
    leftMenu.handleOpen(indexes[0], indexes[1])
})

const prepare = async () => {
    await tool.flow(async () => {
        tool.resize.init()
    }, (err) => {
        tool.toast.error(`${err}`)
    })
}

const clock = reactive({
    data: '',
    update() {
        setInterval(() => {
            this.data = tool.updateClock()
        }, 500);
    }
})
clock.update()

onMounted(async () => {
    await tool.flow(async () => {
        if (store.userData == undefined) {
            tool.handleNotLogin()
            return
        }
        await leftMenu.get()

        // 设置关闭页面的回调函数
        tool.event.onChange('closeMainPage', () => {
            leftMenu.handleCloseByPageUrl(tool.event.getItem('closeMainPage'))
        })
        prepare()
        await leftSize.init()
        show.value = true
    }, (err) => {
        tool.toast.error(`${err}`)
    })
})
</script>

<style scoped>
.tabButtonClose {
    opacity: 0;
}

.tabButton:hover .tabButtonClose {
    opacity: 1
}

.el-header {
    color: #333;
    height: 40px;
    padding: 0;
}

.el-footer {
    color: #333;
    height: 30px;
    padding: 0;
    background-color: rgb(230, 230, 230);
}

.el-aside {
    color: #333;
    padding: 0;
    overflow: hidden;
}

.el-main {
    color: #333;
    padding: 0;
}

.userButton:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
</style>